<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('模板列表')"/>
    <th:block th:include="include :: layout-latest-css"/>
    <th:block th:include="include :: ztree-css"/>
</head>
<style>
    select {
        padding-top: 3px !important;
    }

    .select-list {
        margin-top: 5px !important;
    }

    .select-list li p {
        width: auto !important;
        margin-top: 7px !important;
    }
</style>
<body class="gray-bg">

<div class="ui-layout-center">
    <div class="container-div">

        <div class="row">
            <div class="col-sm-12 search-collapse">
                <form id="dept-form">
                    <div class="select-list">
                        <ul>
                            <li>
                                二级部门：<select name="deptId" id="deptId" onchange="getTertiaryDept()">
                                <option value="">请选择</option>
                                <option th:each="dep:${secondaryDeptList}"  th:value="${dep.deptId }"
                                        th:text="${dep.deptName }"></option>
                            </select>
                            </li>
                            <li>
                                三级部门：<select name="tertiaryDeptId" id="tertiaryDeptId" onchange="getJob(0)">
                                <option value="">请选择</option>
                            </select>
                            </li>
                            <li>
                                岗位：<select name="jobId" id="jobId">
                                <option value="">请选择</option>
                            </select>
                            </li>
                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.refresh();"><i class="fa fa-search"></i>&nbsp;搜索</a>
                                <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>
            <div class="col-sm-12 select-table table-striped">

                <div class="btn-group-sm" id="toolbar" role="group">
                    <a class="btn btn-info" onclick="importExcel()">
                        <i class="fa fa-upload"></i> 选择模板文件
                    </a>
                    <a class="btn btn-warning" onclick="importTemplate()">
                        <i class="fa fa-download"></i> 导入
                    </a>
                    <a class="btn btn-danger" onclick="TemplateEmpty()">
                        <i class="fa fa-remove"></i> 清空
                    </a>
                </div>

                <table id="bootstrap-table"></table>

            </div>
        </div>
    </div>
</div>

<th:block th:include="include :: footer"/>
<th:block th:include="include :: layout-latest-js"/>
<th:block th:include="include :: ztree-js"/>
<script th:inline="javascript">
    var prefix = ctx + "acvTemplateManage";

    $(function () {

        var options = {
            code: "id",
            uniqueId: "id",
            url: prefix + '/acvTemplateList',
            createUrl: prefix + "/add",
            updateUrl: prefix + "/edit/{id}",
            removeUrl: prefix + "/remove",
            importUrl: prefix + "/importTemplateFile",
            importTemplateUrl: prefix + "/downloadTemplate",
            exportUrl: prefix + "/export",
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            pagination:false,
            modalName: "模板",
            columns: [
                {
                    field: 'assessmentIndex',
                    title: '考核指标',

                },
                {
                    field: 'describe',
                    title: '考核描述',

                },
                {
                    field: 'goal',
                    title: '达成目标',

                },
                {
                    field: 'standard',
                    title: '评分标准',
                },
                {
                    field: 'distribution',
                    title: '指标配分',
                }]
        };
        $.table.init(options);
    });

    function downloadTemplate() {
        $.operate.exportData("acvTemplateManage/downloadTemplate", "考核项模板");
        $(".btn-white").click();
    }

    function importTemplate(){
        $.ajax({
            url: prefix + '/templateListIsNull',
            type: 'POST',
            data: {},
            success: function (data) {
                if(data.code == 0){
                    $.modal.open('导入选项','acvTemplateManage/importOption',500,500)
                }else{
                    $.modal.alertWarning('无模板数据!');
                }
            }
        })
    }

    function TemplateEmpty(){
        $.ajax({
            url: prefix + '/TemplateEmpty',
            type: 'POST',
            data: {},
            success: function (data) {
                if(data.code == 0){
                    $.table.refresh();
                }else{
                    $.modal.alertWarning('无模板数据!');
                }
            }
        })
    }



    function  importExcel(){
        $("#jobId").val("");
        $.table.importExcel();
    }

    function getTertiaryDept() {
        var deptId = $("#deptId").val();
        var html = "";

        $.ajax({
            async: false,
            url: ctx + "acvEmpManage/getTertiaryDept",
            data: {
                "deptId": deptId
            },
            type: "post",
            dataType: "json",
            success: function (data) {
                $("#tertiaryDeptId").empty();
                var arry = data;
                if(arry.length == 0){
                    getJob(1);
                }
                html += "<option value=''>请选择</option>";
                for (var i = 0; i < arry.length; i++) {
                    html += "<option value='"
                        + arry[i].deptId
                        + "'>"
                        + arry[i].deptName
                        + "</option>";
                }
                $("#tertiaryDeptId").append(html);

            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("错误,请联系管理员,错误信息:" + textStatus);
            }
        });
    }


    function getJob(type) {
        $("#jobId").empty();
        if(type==0){
            var tertiaryDeptId = $("#tertiaryDeptId").val();
        }else{
            var tertiaryDeptId = $("#deptId").val();
        }
        var html = "";

        $.ajax({
            async: false,
            url: ctx + "acvEmpManage/getJobByTertiaryDeptId",
            data: {
                "tertiaryDeptId": tertiaryDeptId
            },
            type: "post",
            dataType: "json",
            success: function (data) {
                $("#jobId").empty();
                var arry = data;
                html += "<option value=''>请选择</option>";
                for (var i = 0; i < arry.length; i++) {
                    html += "<option value='"
                        + arry[i].jobId
                        + "'>"
                        + arry[i].jobName
                        + "</option>";
                }
                $("#jobId").append(html);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("错误,请联系管理员,错误信息:" + textStatus);
            }
        });
    }

</script>
</body>

<script id="importTpl" type="text/template">
    <form enctype="multipart/form-data" class="mt20 mb10">
        <div class="col-xs-offset-1">
            <input type="file" id="file" name="file"/>
            <div class="mt10 pt5">
                <a class="btn btn-default btn-xs" onclick="downloadTemplate()">
                    <i class="fa fa-file-excel-o"></i> 下载模板
                </a>
            </div>
            <font color="red" class="pull-left mt10">
                提示：仅允许导入“xls”或“xlsx”格式文件！
            </font>
        </div>
    </form>
</script>

</html>